<template>
<<<<<<< HEAD
          <div class="home">
                <Consilia/>
                  
          </div>
=======
  <div class="home">
    <div class="gjf-home-header">
      <van-search @click="toSearch" placeholder="三爱商城" />
    </div>
    <div class="gjf-home-lunbo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="../assets/banner01.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img src="../assets/banner01.jpg" alt=""></van-swipe-item>
      </van-swipe>
    </div>
    <div class="gjf-home-bar">
      <van-notice-bar text="每日养生:" left-icon="volume-o" >中医讲究“春夏养阳”，在调和阳气的中药里</van-notice-bar>
    </div>
    <div class="gjf-home-class">
      <p class="gjf-home-class-title">
        <span class="gjf-s1">
          <span class="iconfont icon-biaoqing gjf-ss1"></span>热门分类
        </span>
        <span class="gjf-s2">
          查看更多<span class="iconfont icon-youjiantou gjf-s3"></span>
        </span>
      </p>
    </div>
    <div class="gjf-home-img4">
      <div class="gjf-home-img4-item">
        <img src="../assets/popularson01.jpg" alt="">
      </div>
      <div class="gjf-home-img4-item">
        <img src="../assets/popularson02.jpg" alt="">
      </div>
      <div class="gjf-home-img4-item">
        <img src="../assets/popularson03.jpg" alt="">
      </div>
      <div class="gjf-home-img4-item">
        <img src="../assets/popularson04.jpg" alt="">
      </div>
    </div>
    <Tabbar />
  </div>
>>>>>>> 0772e09347cd8cf29e048644ee9f493c5e777b5e
</template>

<script>
// @ is an alias to /src
<<<<<<< HEAD
// import HelloWorld from '@/components/HelloWorld.vue'
import Consilia from '../components/Consilia'
=======

import Tabbar from "../components/Tabar";
>>>>>>> 0772e09347cd8cf29e048644ee9f493c5e777b5e
export default {
  name: "Home",
  components: {
<<<<<<< HEAD
   Consilia
=======
    Tabbar
  },
  methods: {
    toSearch() {
      this.$router.push("/search");
    }
>>>>>>> 0772e09347cd8cf29e048644ee9f493c5e777b5e
  }
};
</script>
<style scoped>
.home {
  width: 100%;
}
.gjf-home-header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gjf-home-lunbo{
  width: 100%;
}
.gjf-home-lunbo img{
  width: 100%;
}
.gjf-home-class{
  width: 100%;
}
.gjf-home-class-title{
  width: 100%;
  height: 1.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .875rem;
}
.gjf-s1{
  display: inline-block;
  height: 1.25rem;
  
  font-size: .9375rem;
  display: flex;
  align-items: center;
}
.gjf-ss1{
  font-size: 1.25rem;
}
.gjf-s3{
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  background: olive;
  color: white;
  border-radius: 9px;
  text-align: center;
  line-height: 1.125rem;
}
.gjf-home-img4{
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.gjf-home-img4-item{
  width: 47%;
}
.gjf-home-img4-item img{
  width: 100%;
}
</style>
